import React from 'react';
import { Toast } from 'antd-mobile';
import copy from 'copy-to-clipboard';
import { Result, InterviewDetail, Divider } from '../../components';
import refusePic from '../../../images/interview-bg-refuse.png';
import phoneIcon from '../../../images/icon-phone.png';
import copyIcon from '../../../images/icon-copy.png';
import styles from './index.less';

const InvalidPage = ({ data }) => {
    const handleCopy = str => {
        copy(str);
        Toast.info('复制成功');
    };

    const list = [
        {
            key: '姓名',
            render: (
                <div style={{ whiteSpace: 'pre', display: 'inline-block' }}>
                    <span style={{ display: 'inline-block', width: '2em', margin: 0 }}></span>
                    姓名
                </div>
            ),
            value: data?.name || '--'
        },
        {
            key: '联系电话',
            value: (
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    {data?.phone || '--'}
                    {data?.phone && (
                        <a href={`tel:${data?.phone}`} style={{ display: 'flex', alignItems: 'center' }}>
                            <img alt="" src={phoneIcon} style={{ width: 14, marginLeft: 8 }} />
                        </a>
                    )}
                </div>
            )
        },
        {
            key: '联系邮箱',
            value: (
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    {data?.email || '--'}
                    {data?.email && (
                        <img
                            alt=""
                            src={copyIcon}
                            style={{ width: 14, marginLeft: 8 }}
                            onClick={() => handleCopy(data?.email)}
                        />
                    )}
                </div>
            )
        }
    ];

    return (
        <div className={styles.interviewMobile}>
            <div style={{ background: '#fff' }}>
                <Result type={3} title="超过有效期，链接已失效" content="如有疑问请联系HR" />
                <img
                    alt=""
                    src={refusePic}
                    style={{
                        width: '100%',
                        paddingLeft: 24,
                        marginTop: -24,
                        marginBottom: 16
                    }}
                />
            </div>
            <Divider />
            <div className={styles.fullDetail}>
                <div className={styles.info}>HR联系信息</div>
                <InterviewDetail dataSource={list} />
            </div>
        </div>
    );
};

export default InvalidPage;
